<template>
  <el-upload
    ref="upload"
    :class="disabled?'upload-none':''"
    action="/api/v1/rabbit/file/upload"
    :data="uploadData"
    :limit="limit"
    :multiple="multiple"
    :on-exceed="handleExceed"
    :headers="headers"
    :on-success="handleSuccess"
    :before-remove="handleRemove"
    :on-preview="handleDownloadFile"
    :file-list="isArray(fileList)?fileList:[]"
    :http-request="handleRequestFile"
  >
    <el-button>上传附件</el-button>
  </el-upload>
</template>
<script>
import { request } from "@rabbit.do/rabbit";
import Cookies from "js-cookie";
import { Download, isArray } from "@monkey.do/monkey";
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
    limit: {
      type: Number,
      default: 10,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      headers: {
        Authorization: `Bearer ${Cookies.get("AuthToken")}`,
      },
      uploadData: {
        appId: 2,
        type: 1,
      },
      blob: undefined,
      fileList: [],
    };
  },
  watch: {
    data: {
      handler(val) {
        if (val) this.fileList = [...val];
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    isArray,
    // 删除附件
    handleRemove(file, fileList) {
      const index = fileList.findIndex((item) => {
        return file.uid === item.uid;
      });
      this.fileList.splice(index, 1);
      this.$emit("change", this.fileList);
    },
    // 文件上传成功
    handleSuccess(response, file, fileList) {
      if (response.statusCode === 600) {
        const obj = {
          id: response.data.id || undefined,
          name: response.data.name || undefined,
        };

        this.fileList.push(obj);
        this.$emit("change", this.fileList);
      }
    },
    handleExceed(files, fileList) {
      this.msgError(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 下载上传的文件
    handleDownloadFile(file) {
      if (file.id) {
        Download(file.id, (res) => {
          if (res.statusCode === 600 && res.data) {
            this.msgSuccess(res.message);
          } else if (res.statusCode === 600) {
            this.msgError(res.message);
          }
        });
      }
    },
    // 自定义上传
    handleRequestFile(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("appId", 2);
      formData.append("type", 1);
      request({
        url: "/rabbit/file/upload",
        data: formData,
      }).then(res => {
        if (res.statusCode === 600) {
          const obj = {
            id: res.data.id || undefined,
            name: res.data.name || undefined,
          };
          this.fileList.push(obj);
          this.$emit("change", this.fileList);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
  .upload-none {
    /deep/.el-upload--text {
      display: none;
    }
    /deep/.el-icon-close:before {
      display: none;
    }
  }
</style>
